<template>
  <div class="contentBox">
    <AuthorListItemAcross
      v-for="item in newAuthorTalentList"
      :key="item.user_id"
      :authorTalentList="item"
      @click="handleAuthorDetails(item.user_id)"
    />
  </div>
</template>

<script>
import AuthorListItemAcross from "@/views/authorTable/component/AuthorListItemAcross";
import { useRouter } from "vue-router";
import { ref, watchEffect } from "vue";
import { getTalent } from "@/api/home";
import { useStore } from "vuex";
export default {
  name: "AuthorContentList",
  components: { AuthorListItemAcross },
  setup() {
    //获取数据
    const { getTalentList, newAuthorTalentList } = handlegetTalent();
    getTalentList();
    //跳转用户详情
    const router = useRouter();
    const handleAuthorDetails = (value) => {
      router.push(`/authorTable/${value}`);
    };
    return {
      newAuthorTalentList,
      handleAuthorDetails,
    };
  },
};
//获取宠物列表数据
function handlegetTalent() {
  const store = useStore();
  const authorTalentList = ref([]);
  const newAuthorTalentList = ref([]);
  const getTalentList = () => {
    getTalent("all").then((res) => {
      console.log(res);
      newAuthorTalentList.value = authorTalentList.value = res.data;
    });
  };
  //监听品种并筛选
  watchEffect(() => {
    if (
      store.state.authorFiltrate.gender == "全部" &&
      store.state.area.city == "全部"
    ) {
      //种类为：categoryId(0)全部  城市地址为：city(全部)
      newAuthorTalentList.value = authorTalentList.value;
    } else if (
      store.state.authorFiltrate.gender != "全部" &&
      store.state.area.city == "全部"
    ) {
      //种类为：categoryId(*)  城市地址为：city(全部)
      newAuthorTalentList.value = authorTalentList.value.filter(
        (item) => item.user_gender == store.state.authorFiltrate.gender
      );
    } else if (
      store.state.authorFiltrate.gender == "全部" &&
      store.state.area.city != "全部"
    ) {
      //种类为：categoryId(0)全部  城市地址为：city(*)
      newAuthorTalentList.value = authorTalentList.value.filter((item) =>
        item.user_address?.includes(store.state.area.city)
      );
    } else {
      //种类为：categoryId(*)  城市地址为：city(*)
      newAuthorTalentList.value = authorTalentList.value.filter(
        (item) =>
          item.user_gender == store.state.authorFiltrate.gender &&
          item.user_address?.includes(store.state.area.city)
      );
    }
  });

  return { getTalentList, newAuthorTalentList };
}
</script>

<style scoped>
.contentBox {
  padding: 0 0.4rem;
  /*border: 1px solid black;*/
  background-color: #f7f8fa69;
}
</style>
